<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			display: flex;
			height: 100vh;
			justify-content: center;
			align-items: center;
			background-color: #222;
			min-width: 1200px;
		}

		.box {
			width: 199px;
			text-align: center;
			border: 1px solid #DCDCDC;
			background: no-repeat center center;
			background-color: rgba(204, 217, 220, .1);
			background-size: 45px;
			transition: all .3s;
			cursor: pointer;
			overflow: hidden;
			height: 28px;
			line-height: 28px;
			opacity: .5;
			border-radius: 14px;
			color: #fff;
		}

		.box:hover {
			border: 1px solid #008000;
			background-color: rgba(177, 211, 220, 0.5);
		}

		@keyframes show {
			0% {
				transform: rotateX(90deg);
			}

			8% {
				opacity: 1;
				transform: rotateX(-60deg);
			}

			18% {
				opacity: 1;
				transform: rotateX(40deg);
			}

			34% {
				opacity: 1;
				transform: rotateX(-28deg);
			}

			44% {
				opacity: 1;
				transform: rotateX(18deg);
			}

			58% {
				opacity: 1;
				transform: rotateX(-12deg);
			}

			72% {
				opacity: 1;
				transform: rotateX(9deg);
			}

			88% {
				opacity: 1;
				transform: rotateX(-5deg);
			}

			96% {
				opacity: 1;
				transform: rotateX(2deg);
			}

			100% {
				opacity: 1;
			}
		}

		.codeBox {
			z-index: 1;
			display: none;
			perspective: 400px;
			position: absolute;
			margin: auto;
			width: 200px;
			height: 200px;
		}

		.codeBox div {
			cursor: pointer;
			background: #fff no-repeat center center;
			background-size: 190px;
			border-radius: 6px;
			box-shadow: 0 2px 7px rgb(0 0 0 / 30%);
			opacity: 0;
			transition: all 1s ease-in-out;
			transform-style: preserve-3d;
			transform-origin: center center;
			overflow: hidden;
			opacity: 1;
			-webkit-animation: show 3s ease-in-out 0s 1 normal forwards;
		}

		img {
			width: 100%;
			height: 100%;
		}

		.hide {
			-webkit-animation: hide .5s ease-in-out 0s 1 normal forwards;
		}

		@keyframes hide {

			20%,
			50% {
				transform: scale(1.08, 1.08);
				opacity: 1;
			}

			100% {
				opacity: 0;
				transform: rotateZ(40deg) scale(0.6);
			}
		}
	</style>
	<body>
		<div class="box" id="box">展示苏苏的二维码</div>
		<div class="codeBox" id="code_box">
			<div id="hide">
				<img src="./susu.png" />
			</div>
		</div>
	</body>
	<script>
		let btn = document.getElementById('box');
		let hbtn = document.getElementById('hide');
		// 1
		// var checked=true
		btn.onclick = function() {
			document.getElementById('code_box').classList.remove('hide');
			document.getElementById('code_box').style.display = "block";
		}

		hbtn.onclick = function() {
			document.getElementById('code_box').classList.add('hide');
			setTimeout(() => {
				document.getElementById('code_box').style.display = "none";
			}, 500)
		}
		// 2
		// window.onload = function() {
		// 	var btn = document.getElementById("box");
		// 	btn.addEventListener('click', function() {
		// 		alert('你点击了按钮哦！')
		// 	}, false);
		// }
	</script>
</html>
